<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <!-- <el-form-item label="ID" prop="parentId">
          <el-input
            v-model="queryParams.parentId"
            placeholder="请输入父ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <!-- <el-form-item label="风险单元名称" prop="unitName">
          <el-input
            v-model="queryParams.unitName"
            placeholder="请输入祖级列表"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="名称" prop="unitName">
          <el-input
            v-model="queryParams.unitName"
            placeholder="请输入名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="显示顺序" prop="orderNum">
          <el-input
            v-model="queryParams.orderNum"
            placeholder="请输入显示顺序"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        
        <el-form-item label="描述" prop="unitDesc">
          <el-input
            v-model="queryParams.unitDesc"
            placeholder="请输入描述"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['app:scheme:add']"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-sort"
            size="mini"
            @click="toggleExpandAll"
            >展开/折叠</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addParams"
            >新增主单元</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
  
      <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="unitList"
        row-key="unitId"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="单元名称" prop="unitName" />
        <!-- <el-table-column label="祖级列表" align="center" prop="ancestors" /> -->
        <el-table-column label="显示顺序" align="center" prop="orderNum" />
        <!-- <el-table-column label="名称" align="center" prop="unitName" /> -->
        <el-table-column label="描述" align="center" prop="unitDesc" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['app:scheme:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)"
              v-hasPermi="['app:scheme:add']"
              >新增</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['app:scheme:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 添加或修改风险对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="父单元" prop="parentId">
            <!-- <el-input v-model="form.parentId" placeholder="请输入父单元" /> -->
            <!-- disabled -->
            <el-select v-model="form.parentId" placeholder="请选择活动区域">
              <el-option v-for="item in unitOptions" :key="item.unitId" :label="item.unitName" :value="item.unitId" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示顺序" prop="orderNum">
            <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
          </el-form-item>
          <el-form-item label="名称" prop="unitName">
            <!-- <treeselect
              v-model="form.unitName"
              :options="unitOptions"
              :normalizer="normalizer"
              placeholder="请选择名称"
            /> -->
            <el-input v-model="form.unitName" placeholder="请输单元名称" />
  
          </el-form-item>
          <el-form-item label="描述" prop="unitDesc">
            <el-input v-model="form.unitDesc" placeholder="请输入描述" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="addpara" width="500px" append-to-body>
        <el-form ref="form" :model="paraForm" :rules="rules" label-width="80px">
          <el-form-item label="显示顺序" prop="orderNum">
            <el-input v-model="paraForm.orderNum" placeholder="请输入显示顺序" />
          </el-form-item>
          <el-form-item label="名称" prop="unitName">
            <!-- <treeselect
              v-model="form.unitName"
              :options="unitOptions"
              :normalizer="normalizer"
              placeholder="请选择名称"
            /> -->
            <el-input v-model="paraForm.unitName" placeholder="请输单元名称" />
  
          </el-form-item>
          <el-form-item label="描述" prop="unitDesc">
            <el-input v-model="paraForm.unitDesc" placeholder="请输入描述" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="parasubmitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
    
    <script>
  import {
    listUnit,
    getUnit,
    delUnit,
    addUnit,
    updateUnit,
  } from "@/api/system/unit";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  
  export default {
    name: "Unit",
    components: {
      Treeselect,
    },
    data() {
      return {
        addpara:false,
        parest:true,
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 风险表格数据
        unitList: [],
        // 风险树选项
        unitOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否展开，默认全部展开
        isExpandAll: true,
        // 重新渲染表格状态
        refreshTable: true,
        // 查询参数
        queryParams: {
          parentId: null,
          ancestors: null,
          orderNum: null,
          unitName: null,
          unitDesc: null,
        },
        // 表单参数
        form: {
        },
        paraForm:{
          // parentId: null,
          orderNum: null,
          unitName: null,
          unitDesc: null,
        },
        // 表单校验
        rules: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {
      addParams(){
        // this.parest = false
        this.addpara = true
      },
      /** 查询风险列表 */
      getList() {
        this.loading = true;
        listUnit(this.queryParams).then((response) => {
            console.log(response.rows,'response.rows');
          this.unitList = this.handleTree(response.rows, "unitId", "parentId");
          this.loading = false;

          console.log(this.unitList,'this.unitList');
        });
      },
      /** 转换风险数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.unitId,
          label: node.parentId,
          children: node.children,
        };
      },
      /** 查询风险下拉树结构 */
      getTreeselect() {
        listUnit().then((response) => {
          this.unitOptions = [];
          const data = { unitId: 0, parentId: "主节点", children: [] };
          data.children = this.handleTree(response.rows, "unitId", "unitName");
          this.unitOptions.push(data);
        });

        console.log(this.unitOptions,'unitOptions');
      },
      // 取消按钮
      cancel() {
        this.open = false;
      //   this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          // unitId: null,
          parentId: null,
          // parentName:null,
          // ancestors: null,
          orderNum: null,
          unitName: null,
          unitDesc: null,
          // createTime: null,
          // createBy: null,
          // status: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      async handleAdd(row) {

        this.reset();
        // this.getTreeselect();
        await listUnit(this.queryParams).then((response) => {
          console.log(response);
          this.unitOptions = response.rows
        });
        if (row != null && row.unitId) {
          this.form.parentId = row.unitId;
        //   this.form.parentName = row.unitName
        } else {
          this.form.parentId = null;
          this.form.parentName = '主单元'
        }
        this.open = true;
        this.title = "添加风险";
      },
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      },
      /** 修改按钮操作 */
      async handleUpdate(row) {
        this.reset();
        this.open = true;
        // this.form = row
        // this.getTreeselect();
        this.title = "修改风险";
        await listUnit(this.queryParams).then((response) => {
          console.log(response);
          this.unitOptions = response.rows
        });
        console.log(row);
        if (row != null && row.unitId) {
          this.form.parentId = row.parentId;
          this.form.orderNum = row.orderNum;
          this.form.unitName = row.unitName;
          this.form.unitDesc = row.unitDesc;
        //   this.form.parentName = row.unitName
        } else {
          this.form.parentId = 0;
          this.form.parentName = '主单元'
        }
      //   if (row != null) {
      //     this.form = row
      //   }
      //   console.log(row,this.form);
      console.log(this.unitOptions,'ediiiiiiiiiiiii');
      
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.unitId != null) {
              updateUnit(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addUnit(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      parasubmitForm(){
        addUnit(this.paraForm).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.addpara = false;
                this.getList();
              });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$modal
          .confirm('是否确认删除风险名称为"' + row.unitName + '"的数据项？')
          .then(function () {
            return delUnit(row.unitId);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
    },
  };
  </script>
    